<template>
  <div class="footer">
    <img :src="imgSrc" alt="云昂login" />
    <div class="navigation">
        <h3>{{navigationTitle}}</h3>
        <span @click="push(item.path)" href="" v-for="(item,i) in navigation" :key="i">{{item.name}}</span>
    </div>
    <div class="concatUs">
        <h3>{{contactUsTitle}}</h3>
        <span  v-for="(item,i) in contactUs" :key="i">{{item}}</span>
    </div>
    <div>
        <img src="@/assets/img/qrCode.jpg" alt="暂无二维码">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      qrCode:'',
      imgSrc: "",
      navigationTitle:"",
      navigation: [],
      contactUsTitle:"",
      contactUs: [],
    };
  },
  created() {
    this.createData();
  },
  methods: {
    async createData() {
      const {data:res} = await this.$axios.get('/OfficialWebsite/getPageOfFooter')
      if(res.code === 200){
        this.contactUs = res.data.contactUs
        this.qrCode = res.data.RQcode
        this.imgSrc = res.data.image,
        this.navigationTitle = res.data.navigationTitle
        this.contactUsTitle = res.data.contactUsTitle
        this.navigation = res.data.navigation
        console.log('footer',res.data);
      }
    },
    // 快速导航
    push(path){
      this.$store.commit("sendPath",path)
      this.$router.push(path)
    }
  },
};
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  padding: 7.5rem 8.375rem;
  // margin-top:.625rem;
  background-color: #F5FBFF;
  img {
    height: 178px;
    width: 178px;
  }
  .navigation{
    h3{
      margin-bottom:2.5rem;
    }
    span{
      display: block;
      color: #494949;
      margin-bottom:1.25rem;
      cursor: pointer;
    }
  }
  .concatUs{
    h3{
      margin-bottom:2.5rem;
    }
    span{
      display: block;
      color: #494949;
      margin-bottom:1.25rem
    }
  }
}
</style>
